<template>
  <el-dialog
    :title="$t('authority.menuInfo.form.addMenu')"
    :visible="true"
    @close="close(false)"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="menuInfo" :rules="rules" label-width="150px">
      <el-form-item :label="$t('authority.menuInfo.form.superiorMenu') + '：'" prop="parentId">
        <ht-form-tree
          v-model="menuTreeSelectItem"
          :dataOptions="menuTreeDataSource"
          :defaultProps="menuTreeProps"
        ></ht-form-tree>
      </el-form-item>
      <el-form-item :label="$t('authority.menuInfo.form.menuType') + '：'" prop="menuType">
        <el-radio-group v-model="menuInfo.menuType" @change="menuVisible">
          <el-radio v-for="(type, index) in menuTypeOptions" :key="index" :label="type.value">{{ type.text }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        :label="$t('authority.menuInfo.form.busiType') + '：'"
        prop="busiType"
        v-if="showMultipleCorporate && busiScopeVisible"
      >
        <el-select
          v-model="menuInfo.busiType"
          :placeholder="$t('authority.menuInfo.rules.busiTypePLH')"
          class="common-select"
        >
          <el-option
            v-for="item in busiScopeOptions"
            :key="item.value"
            :label="item.text"
            :value="Number(item.value)"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="$t('authority.menuInfo.form.administrator') + '：'"
        prop="adminMenu"
        v-if="adminMenuVisible"
      >
        <el-radio-group v-model="menuInfo.adminMenu">
          <el-radio v-for="(type, index) in yesOrNoOptions" :label="type.value" :key="index">{{ type.text }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('authority.menuInfo.form.menuIcon') + '：'" prop="icon">
        <el-popover placement="bottom-start" trigger="click" @show="$refs['iconSelect'].reset()" width="500">
          <IconSelect ref="iconSelect" @selected="iconSelected" />
          <el-input
            slot="reference"
            v-model="menuInfo.icon"
            :placeholder="$t('authority.menuInfo.rules.menuIconPLH')"
            readonly
          >
            <svg-icon v-if="menuInfo.icon" slot="prefix" :icon-class="menuInfo.icon" class="el-input__icon" />
            <i v-else slot="prefix" class="el-icon-search el-input__icon"></i>
          </el-input>
        </el-popover>
      </el-form-item>

      <el-form-item :label="$t('authority.menuInfo.form.menuName') + '：'" prop="menuName">
        <el-input v-model="menuInfo.menuName" />
      </el-form-item>
      <el-form-item :label="$t('authority.menuInfo.form.vuePath') + '：'" prop="vuePath" v-if="vuePathVisible">
        <el-input v-model="menuInfo.vuePath" />
      </el-form-item>
      <el-form-item
        :label="$t('authority.menuInfo.form.componentPath') + '：'"
        prop="vueComponent"
        v-if="vueComponentVisible"
      >
        <el-input v-model="menuInfo.vueComponent" />
      </el-form-item>
      <el-form-item :label="$t('authority.menuInfo.form.perms') + '：'" prop="perms" v-if="permsVisible">
        <el-input v-model="menuInfo.perms" />
      </el-form-item>
      <el-form-item :label="$t('authority.menuInfo.form.postSort') + '：'" prop="orderNum">
        <el-input-number v-model.number="menuInfo.orderNum" :min="0" :max="99" controls-position="right" />
      </el-form-item>
      <el-form-item :label="$t('authority.menuInfo.form.state') + '：'" prop="visible">
        <el-radio-group v-model="menuInfo.visible">
          <el-radio v-for="(type, index) in visibleOptions" :label="type.value" :key="index">{{ type.text }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('authority.menuInfo.form.remark') + '：'" prop="remark">
        <el-input v-model="menuInfo.remark" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{ $t("common.confirm") }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { baseMixin } from "@/libs/baseMixin";
import { property } from "@/api/authority_app/base";
import { menuTree, add, checkMenuNameUnique, checkVuePathUnique } from "@/api/authority_app/menuInfo/index";
import IconSelect from "@/components/IconSelect";

export default {
  name: "menuInfoAdd",
  mixin: [baseMixin],
  components: {
    IconSelect,
  },
  data() {
    let validateParentId = (rule, value, callback) => {
      if (this.menuInfo.id === value) {
        callback(new Error(this.$t("authority.menuInfo.rules.noTips")));
      } else {
        callback();
      }
    };
    let validateMenuName = (rule, value, callback) => {
      if (this.menuInfo.menuName) {
        var data = {
          parentId: this.menuInfo.parentId,
          menuName: this.menuInfo.menuName,
        };
        checkMenuNameUnique(data).then((response) => {
          if (response.result === true) {
            callback();
          } else {
            callback(new Error(this.$t("authority.menuInfo.rules.exists")));
          }
        });
      } else {
        callback(new Error(this.$t("authority.menuInfo.rules.menuNamePLH")));
      }
    };
    let validateVuePath = (rule, value, callback) => {
      var data = {
        parentId: this.menuInfo.parentId,
        vuePath: this.menuInfo.vuePath,
      };
      checkVuePathUnique(data).then((response) => {
        if (response.result === true) {
          callback();
        } else {
          callback(new Error(this.$t("authority.menuInfo.rules.routerExists")));
        }
      });
    };

    return {
      // 菜单树形下拉框数据源
      menuTreeDataSource: [],

      //
      menuTreeProps: {
        children: "children",
        label: "name",
      },
      // 菜单树形下拉框 选中的ID
      menuTreeSelectItem: [],
      // 菜单类型数据字典
      menuTypeOptions: [],
      // 可见数据字典
      visibleOptions: [],

      busiScopeOptions: [],

      yesOrNoOptions: [],
      menuInfo: {
        parentId: undefined,
        menuType: "1",
        busiType: "",
        menuName: undefined,
        vuePath: "",
        vueComponent: "",
        perms: "",
        orderNum: 0,
        visible: "1",
        remark: "",
        adminMenu: "2",
        icon: "",
      },
      // 表单校验
      rules: {
        parentId: [{ trigger: "blur", validator: validateParentId }],
        menuName: [
          { validator: validateMenuName, trigger: "blur" },
          {
            required: true,
            message: this.$t("authority.menuInfo.rules.nameNoEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 64,
            message: this.$t("authority.menuInfo.rules.nameLength"),
            trigger: "blur",
          },
        ],
        vuePath: [
          { validator: validateVuePath, trigger: "blur" },
          {
            required: true,
            message: this.$t("authority.menuInfo.rules.routerNoEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 64,
            message: this.$t("authority.menuInfo.rules.routerLength"),
            trigger: "blur",
          },
        ],
        vueComponent: [
          {
            required: true,
            message: this.$t("authority.menuInfo.rules.pathNoEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 64,
            message: this.$t("authority.menuInfo.rules.pathLength"),
            trigger: "blur",
          },
        ],
        orderNum: [
          {
            required: true,
            message: this.$t("authority.menuInfo.rules.sortNoEmpty"),
            trigger: "blur",
          },
        ],
        busiType: [
          {
            required: true,
            message: this.$t("authority.menuInfo.rules.busiTypeNoEmpty"),
            trigger: "blur",
          },
        ],
        url: [
          {
            max: 200,
            message: this.$t("authority.menuInfo.rules.lengthLimit", {
              val: 200,
            }),
            trigger: "blur",
          },
        ],
        perms: [
          {
            max: 100,
            message: this.$t("authority.menuInfo.rules.lengthLimit", {
              val: 100,
            }),
            trigger: "blur",
          },
        ],
        remark: [
          {
            max: 500,
            message: this.$t("authority.menuInfo.rules.lengthLimit", {
              val: 500,
            }),
            trigger: "blur",
          },
        ],
      },
      vuePathVisible: false,
      vueComponentVisible: false,
      permsVisible: false,
      busiScopeVisible: false,
      adminMenuVisible: false,
      showMultipleCorporate: false,
    };
  },
  props: {
    parentId: {
      type: String,
    },
  },
  watch: {
    menuTreeSelectItem(val) {
      this.menuInfo.parentId = val[0];
    },
  },
  mounted() {
    this.getDicts("sys_menu_type").then((response) => {
      this.menuTypeOptions = response.result;
    });
    this.getDicts("sys_show_hide").then((response) => {
      this.visibleOptions = response.result;
    });

    this.getDicts("sys_yes_no").then((response) => {
      this.yesOrNoOptions = response.result;
    });

    this.getDicts("busiScope").then((response) => {
      this.busiScopeOptions = response.result;
    });
    menuTree().then((response) => {
      this.menuTreeDataSource = response.result;
    });
    this.menuInfo.parentId = this.parentId;
    this.menuTreeSelectItem.push(this.parentId);
    this.menuVisible(this.menuInfo.menuType);

    this.getProperty();
  },
  methods: {
    iconSelected(name) {
      this.menuInfo.icon = name;
    },
    menuVisible(menuType) {
      if (menuType == "1") {
        this.vuePathVisible = true;
        this.vueComponentVisible = false;
        this.permsVisible = false;
        this.busiScopeVisible = false;
        this.adminMenuVisible = false;
        this.menuInfo.vueComponent = "";
      } else if (menuType == "2") {
        this.vuePathVisible = true;
        this.vueComponentVisible = true;
        this.permsVisible = true;
        this.busiScopeVisible = true;
        this.adminMenuVisible = true;
      } else if (menuType == "3") {
        this.vuePathVisible = false;
        this.vueComponentVisible = false;
        this.permsVisible = true;
        this.busiScopeVisible = false;
        this.adminMenuVisible = true;
        this.menuInfo.vueComponent = "";
      }
    },
    getProperty() {
      property().then((res) => {
        this.showMultipleCorporate = res.result.multipleCorporate;
      });
    },
    /** 取消按钮 */
    close(result) {
      this.$emit("closeCallback", result);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          add(this.menuInfo).then((res) => {
            this.msgSuccess(this.$t("common.operateSuccess"));
            this.close(true);
          });
        }
      });
    },
  },
};
</script>
